<template>
  <view>
    <!-- Top Image -->
    <view class="header-image">
      <image src="/static/卫生间防水补漏.jpg" mode="aspectFill"></image>
    </view>

    <!-- Service Title -->
    <view class="service-title">

      <text>卫生间防水补漏</text>
    </view>

    <!-- Service Features -->
    <view class="service-features">
      <view class="feature">到家保障</view>
      <view class="feature">快速响应</view>
      <view class="feature">明码标价</view>
      <view class="feature">30天质保</view>
    </view>

    <!-- Service Flow -->
    <view class="section-title">服务流程</view>
    <view class="service-flow">
      <view class="flow-item">
        <image src="/static/预约下单.jpg" mode="aspectFill"></image>
        <text>1. 预定下单</text>
      </view>
      <view class="flow-item">
        <image src="/static/确认上门.jpg" mode="aspectFill"></image>
        <text>2. 确认上门</text>
      </view>
      <view class="flow-item">
        <image src="/static/报价服务.jpg" mode="aspectFill"></image>
        <text>3. 报价服务</text>
      </view>
      <view class="flow-item">
        <image src="/static/验收付款.jpg" mode="aspectFill"></image>
        <text>4. 验收结款</text>
      </view>
    </view>

    <!-- Pricing Section -->
    <view class="section-title">收费标准</view>
    <view class="pricing-section">
      <view class="pricing-item">
        <text>马桶上水管</text>
        <text>100元/个</text>
      </view>
      <view class="pricing-item">
        <text>热水器上水管</text>
        <text>100元/个</text>
      </view>
      <view class="pricing-item">
        <text>洗手/洗盆上水管 (不拆龙头)</text>
        <text>120元/个</text>
      </view>
      <view class="pricing-item">
        <text>洗手/洗盆上水管 (拆龙头)</text>
        <text>150元/个</text>
      </view>
      <view class="pricing-item">
        <text>水管打压测试</text>
        <text>200元/次</text>
      </view>
      <button class="more-btn">更多价格及费用说明</button>
    </view>

    <!-- User Reviews -->
    <view class="section-title">用户口碑</view>
    <view class="reviews">
      <uni-card>
        <view class="review">
          <text>187*****9977</text>
          <uni-rate value="5" size="18"></uni-rate>
          <view class="tags">
            <view class="tag">非常专业</view>
            <view class="tag">价格合理</view>
            <view class="tag">维修仔细</view>
          </view>
          <text>师傅非常专业，服务体验超好，预约后维修师傅很快就电话联系，准点上门...</text>
          <view class="images">
            <image src="/static/评价1.jpg" mode="aspectFill"></image>
            <image src="/static/评价2.jpg" mode="aspectFill"></image>
            <image src="/static/评价3.jpg" mode="aspectFill"></image>
          </view>
        </view>
      </uni-card>
    </view>

    <!-- FAQ Section -->
    <view class="section-title">常见问题</view>
    <uni-collapse>
      <uni-collapse-item title="师傅上门维修后水管无法关/阀门坏了怎么办？">
        <view>问题描述及解决方案内容...</view>
      </uni-collapse-item>
      <uni-collapse-item title="需要商家提供替代材料吗？">
        <view>问题描述及解决方案内容...</view>
      </uni-collapse-item>
      <uni-collapse-item title="什么情况下需支付30元上门费？">
        <view>问题描述及解决方案内容...</view>
      </uni-collapse-item>
      <!-- More FAQ Items -->
    </uni-collapse>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

<style>
/* Header Image */
.header-image image {
  width: 100%;
  height: 200px;
}

/* Service Title */
.service-title {
  font-size: 22px;
  font-weight: bold;
  padding: 15px;
  text-align: center;
}

/* Service Features */
.service-features {
  display: flex;
  justify-content: space-around;
  padding: 10px 15px;
}

.feature {
  font-size: 14px;
  color: #666;
}

/* Section Title */
.section-title {
  font-size: 18px;
  font-weight: bold;
  padding: 15px;
  background-color: #f5f5f5;
}

/* Service Flow */
.service-flow {
  display: flex;
  justify-content: space-around;
  padding: 15px;
}

.flow-item {
  text-align: center;
  font-size: 14px;
}

.flow-item image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

/* Pricing Section */
.pricing-section {
  padding: 15px;
}

.pricing-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.more-btn {
  margin-top: 10px;
  width: 100%;
  background-color: #f5f5f5;
  text-align: center;
  padding: 10px 0;
  border-radius: 5px;
  font-size: 14px;
}

/* Reviews Section */
.reviews {
  padding: 15px;
}

.review {
  margin-bottom: 15px;
}

.review .tags {
  display: flex;
  margin: 10px 0;
}

.tag {
  background-color: #f0f0f0;
  padding: 5px 10px;
  border-radius: 20px;
  margin-right: 10px;
}

/* FAQ Section */
.uni-collapse {
  padding: 15px;
}
.images{
	height: 700pxpx;
}
</style>